<template>
    <div>
    <Head style="margin-top: -50px"></Head>
        <el-breadcrumb separator-class="el-icon-arrow-right" style="position: absolute;right: 30px; margin-top: 50px">
            <i class="el-icon-location-outline" style="margin-left: 20px;position: relative;right: 300px"></i>
            <span style="position: relative;right: 300px">当前位置:</span>
            <el-breadcrumb-item v-for="(item,i) in breadlist" :key="i" :to="{ path: '/' }">{{item.meta.title}}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="act">
            <div v-for="(item,index) in blogData" :key="index">
                <router-link :to="{path:'/blog/'+item.newsId}" target="_blank">
            <ul>
                <li>
                    <p>{{item.newsTitle}}</p>
                    <span>{{item.addtime}}</span>
                </li>
            </ul>
                </router-link>
            </div>
        </div>

        <div style="display: flex;justify-content: center;margin-top: 10px">
            <el-pagination
                    background
                    @size-change="sizeChange"
                    @current-change="currentChange"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    layout="sizes, prev, pager, next, jumper, ->, total, slot"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>

    import Head from "../common/head";
    import {getNewsList} from "../../api/blog/news";
    export default {
        components: {Head},

        data(){
            return{
                blogData:[],
                HotBlog:[], //热门文章
                types: [],
                total:0,
                currentPage:1,
                size:5,
                mytype:'',
                myblogTags:[],
                btags:null,
                breadlist:[]
            }
        },
        mounted() {
            this.initNews()
        },
        created() {
            this.getBreadcrumb();
            console.log(this.$route.meta);
        },
        watch:{
            $route(){
                this.getBreadcrumb();
            }
        },
        methods:{
            initNews(){
                const _this = this
                getNewsList().then(resp=>{
                    console.log(resp.data.list.list)
                    _this.blogData = resp.data.list.list
                    _this.total = resp.data.list.total
                })
            },
            isindex(route){
                return route.name==="index";
            },
            getBreadcrumb(){
                let matched=this.$route.matched;

                if (!this.isindex(matched[0])){
                    matched=[{path:'/index',meta:{title:"首页"}}].concat(matched)
                }
                this.breadlist=matched;

                console.log(this.breadlist);
            }
        }

        /*data() {
            return {
                tableData: [{
                    jid:'',
                    name: '',
                    evening: '',
                    situation:'',
                    summary: '',
                    date:''
                }]
            }
        },
        methods:{
            edit(row){
                this.$router.push({
                    path:'/book',
                    query:{
                        id:row.id
                    }
                })
            },
            deleteXin(row){
                this.$router.push({
                    path:'/book',
                    query:{
                        id:row.id
                    }
                })
            }
        },
        created() {
            var _this=this
            this.$axios
                .get('/findmy')
                .then(resp=>{
                    console.log(resp.data)
                    _this.tableData=resp.data.result
                    /!*_this.pageSize=resp.data.size
                    _this.total=resp.data.total*!/
                })
        }*/
    }
</script>

<style scoped>
    .act ul li :hover{
        color:#0269B7;
    }

    ul li{
        list-style: none;
        line-height: 53px;
        font-size: 16px;
        color: #555555;
        padding-left: 0px;
        overflow: hidden;
        margin-left: 65px;
        background: url("../../assets/a_14.png")no-repeat 0px center;
    }
    body{
        margin: 0px;
        padding: 0px;
        font-size: 12px;
        font-family: "微软雅黑","黑体";
        color: #898989;
        line-height: 1;
        background: #FFF;
    }
    .act{
        margin-top: 90px;
    }
    .act ul li p{
        width: 60%;
        overflow: hidden;
        color: #5c5c5c;
        text-decoration: none;
        margin-left:20px ;
    }
    .act ul li span{
        color: #5c5c5c;
        float: right;
        margin-right: 50px;
    }
</style>
